import React from 'react'
import { createContext, useContext, useState } from 'react'

export const LoadingContext = createContext({
  loadingState: false,
  setLoadingState: null,
})

export function LoadingProvider({ children }) {
  const [loadingState, setLoadingState] = useState(false)
  const value = { loadingState, setLoadingState }
  return <LoadingContext.Provider value={value}>{children}</LoadingContext.Provider>
}

export function useLoading() {
  const context = useContext(LoadingContext)
  if (!context) {
    throw new Error('useLoading must be used within LoadingProvider')
  }
  return context
}
